<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item
      ><a href="/">营销</a></el-breadcrumb-item>
    <el-breadcrumb-item>品牌推荐</el-breadcrumb-item>
</el-breadcrumb>

<el-card class="box-card">
  <template #header>
    <div class="card-header">
      <el-icon><Search /></el-icon> <span> 筛选搜索</span>
      <el-button class='btn1' @click="reset">重置</el-button>
      <el-button type="primary" @click="search">查询搜索</el-button>
    </div>
  </template>
  <div class="double">
  <div>
      <span>品牌名称:</span>
 <el-input v-model="input" placeholder="品牌名称" class="down"/>
  </div>

  <div class="choose">
      
 
 <span>推荐状态：</span>
<el-select v-model="value" class="m-2" placeholder="胡荒帝">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</el-select>
</div>
</div>
</el-card>

  

<!-- 
//中间过渡的 -->
<el-card class="box-card " >
  <div class="datalist">
    <div>
    数据列表
  </div>
 
<!-- a按钮 -->
<el-button text @click="choose" type=primary>
选择品牌
</el-button>
</div>
<el-dialog v-model="dialogTableVisible" title="选择品牌">
  <div class="mt-4">
  <el-input v-model="input2" placeholder="品牌名称搜索">
    <template #append>搜索</template>
  </el-input>
</div>
  <el-table :data="list2">      
    <el-table-column type="selection" width="200" />

    <el-table-column property="name" label="品牌名称" width="300" />
    <el-table-column property="factoryStatus" label="相关" width="400" ></el-table-column>
    <el-pagination background layout="prev, pager, next" :total="1000" />
  </el-table>
  <el-pagination class="into" background layout="prev, pager, next" :total="1000" />
</el-dialog>
</el-card>
 
<div class="middle">
  <el-table :data="list" style="width: 100%" :border="true" :key="key">
    <el-table-column type="selection" width="65" />
      <el-table-column prop="brandId" label="编号" width="140" />
      <el-table-column prop="brandName" label="品牌名称" width="200" />
      <el-table-column  label="是否推荐" width="220" >
        <template #default="scope">
        <el-switch v-model="scope.row.recommendStatus" :active-value="1" :inactive-value="0" />
       </template>

      </el-table-column>
      <el-table-column prop="sort" label="排序" width="220" />
      <el-table-column  label="状态" width="200" >
        <template #default="scope">
        <div >{{scope.row.recommendStatus === 1 ? '推荐' : '不推荐'}}</div>
      </template>
      </el-table-column>
      <el-table-column label="操作" width="200" flex="right">
        <template #default="scope">
          <el-button @click="sort">设置排序</el-button>
          
          
  <el-dialog v-model="dialogFormVisible" title="设置排序" >
    <el-form :model="form2">
      <el-form-item label="排序" :label-width="formLabelWidth" aria-placeholder="5">
        <el-input v-model="form.name" autocomplete="off"  model-value="1"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
        确定
        </el-button>
      </span>
    </template>
  </el-dialog>

          <el-button @click="del">删除</el-button>
        </template>
      </el-table-column>

      <!-- 自定义列模板 -->


  </el-table>
</div>
<!-- <el-pagination background layout="prev, pager, next" :total="1000" /> -->

<!-- 选择栏和按钮 -->


<!--   //分页器 -->
<div class="demo-pagination-block">
 <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[5, 10, 20, 30]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</div>
</template>




<script setup lang="ts">
import * as api from '../../json/request/api'
import type { IBrandList,IBrandDelete,IBrand,IHomeNewProductDelete} from '../../json/request/QmsAdminConreiller/index'


import { ref,reactive,toRefs,onMounted } from 'vue'
import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
const input = ref('')
const input2 = ref('')
const value = ref('')
const value1 = ref(true)
const keyword = ref('')

let list2 = ref([]);


onMounted(async () => {
  let res = await api.admin.brandlist({
brandName:"",
pageNum:1,
pageSize:10,
recommendStatus:"",

})
  console.log(res);
  list.value = res.list
  total.value =  Number(res.total)
})
const options = [
{
  value: 0 && 1,
  label: '全部',
},
{
  value: 0,
  label: '未推荐',
},
{
  value: 1,
  label: '推荐中',
},

]
let key = ref(1)
//查询搜索
let search = async () => {
  let res = await api.admin.brandlist({
    brandName: input.value,
    pageNum: 1,
    pageSize: 10,
    recommendStatus: value.value,

  })
  list.value = res.list
  console.log(list.value);
  key.value++
  
}
//分页
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let total = ref(0)
let list = ref([]);

//分页的请求
const handleSizeChange = async (val: number) => {
  pageSize4.value=val
  let res = await api.admin.brandlist({
brandName:"",
pageNum:currentPage4.value,
pageSize:pageSize4.value,
recommendStatus:"",

})
  list.value = res.list
   
  total.value =  Number(res.total)

}
const handleCurrentChange = async (val: number) => {
  currentPage4.value = val
  let res = await api.admin.brandlist({
brandName:"",
pageNum:currentPage4.value,
pageSize:pageSize4.value,
recommendStatus:"",

  })
  list.value = res.list
  total.value = Number(res.total)
  console.log(list.value);
  
}

//数据列表的弹出框
let dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
name: '',
region: '',

delivery: false,
type: [],
resource: '',
desc: '',
})


//接收数据
const state = reactive<{
tableData:{}[]
}>({
tableData:[]
})
const {tableData} = toRefs(state)

//设置排序的弹出框
const form2 = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

//删除功能
const del = () => {
  ElMessageBox.confirm(
    '确定要删除该推荐?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
    
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
        //删除的请求
        let res = await api.admin.homenewproductdelete({
        code: 0,
        data: {},
        message: '',
       ids:89
        
        })
      console.log(res);
        
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })

}

//重置按钮
let reset = () => { 
  alert('重置了');
  
  location.reload
}

//选择商品
let choose = async () => {
  dialogTableVisible.value = true
  let res = await api.admin.brand({
    code: 0,
    data: {
      bigPic: '',
      brandStory: '',
      factoryStatus: 0,
      firstLetter: '',
      id: 0,
      logo: '',
      name: '',
      productCommentCount: 0,
      productCount: 0,
      showStatus: 0,
      sort: 0
    },
    message: '',
    pageNum: currentPage4.value,
    pageSize: pageSize4.value,
    list:{}
  })
  console.log(res);
   list2.value = res.list
  
}

//设置排序
let sort = () => {

  
  dialogFormVisible.value = true;
}

</script>

<style scoped>
.datalist{
display:flex;
justify-content:space-between
}
.double{
display:flex;
justify-content:space-between
}
.btn1 {
  margin-left :940px
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.text {
font-size: 14px;
}

.item {
margin-bottom: 18px;
}

.box-card {
width: 1240px;
margin-top:20px
}
.down{
  width:200px;
  margin-left:20px
}

.m-2{
  margin-left:6px
}
.brand{
  margin-left:1000px
}
.demo-pagination-block{
margin-left:700px;
}

.demo-pagination-block + .demo-pagination-block {
margin-top: 30px;
}
.demo-pagination-block .demonstration {
margin-bottom: 16px;
}
.el-button--text {
margin-right: 15px;
}
.el-select {
width: 300px;
}
.el-input {
width: 300px;
}
.dialog-footer button:first-child {
margin-right: 10px;
}
.into{
  margin-left: 390px;
}


</style>